/* 首页 */
<template>
    <div>
        <Card :bordered="false">
            <p slot="title">正在进行&nbsp;&nbsp;>></p>
            <Row style="padding:20px 0">
                <Col span="10" offset="14" style="text-align:right">
                <Input search enter-button="搜索" placeholder="" />
                </Col>
            </Row>

            <!-- 正在进行 -->
            <Table border :columns="columnsUnderway" :data="dataUnderway"></Table>
        </Card>
        <Card :bordered="false">
            <p slot="title">项目查询&nbsp;&nbsp;>></p>

            <!-- 项目查询 -->
            <div class="filter">
                <dl>
                    <dt>报告类型</dt>
                    <dd>
                        <span>全部</span>
                        <span>报告表</span>
                        <span>报告书</span>
                        <span>现状评估报告</span>
                        <span>规划</span>
                        <span>验收</span>
                    </dd>
                </dl>
            </div>

            <div class="filter">
                <dl>
                    <dt>选择类型</dt>
                    <dd>
                        <span>不限</span>
                        <span>近一周</span>
                        <span>近一个月</span>
                        <span>近半年</span>
                        <span>近一年</span>
                    </dd>
                </dl>
            </div>
            <div class="filter">
                <dl>
                    <dt>选择地区</dt>
                    <dd>
                        <span>全国</span>
                        <span>安徽</span>
                        <span>北京</span>
                        <span>福建</span>
                        <span>甘肃</span>
                        <span>安徽</span>
                        <span>全国</span>
                        <span>安徽</span>
                        <span>北京</span>
                        <span>福建</span>
                        <span>甘肃</span>
                        <span>安徽</span>
                        <span>全国</span>
                        <span>安徽</span>
                        <span>北京</span>
                        <span>福建</span>
                        <span>甘肃</span>
                        <span>安徽</span>
                        <span>全国</span>
                        <span>安徽</span>
                        <span>北京</span>
                        <span>福建</span>
                        <span>甘肃</span>
                        <span>安徽</span>
                        <span>全国</span>
                        <span>安徽</span>
                        <span>北京</span>
                        <span>福建</span>
                        <span>甘肃</span>
                        <span>安徽</span>
                    </dd>
                </dl>
            </div>
            <div class="filter">
                <dl>
                    <dt>&nbsp;</dt>
                    <dd>
                        <Row style="padding:20px 0">
                            <Col span="12">
                            <Select style="width:200px;margin-right:20px">

                            </Select>
                            <Select style="width:200px;margin-right:20px">

                            </Select>
                            </Col>
                            <Col span="12" style="text-align:right">
                            <Input search enter-button="搜索" placeholder="请输入关键字" />
                            </Col>
                        </Row>
                    </dd>
                </dl>
            </div>
            <Table border :columns="columnsUnderway" :data="dataUnderway"></Table>
            <div id="rili">
                <img src="../../assets/images/rili.png" alt="">
            </div>
           <!--  <DatePicker :open="open" :value="value3" confirm type="date" @on-change="handleChange" @on-clear="handleClear"
                @on-ok="handleOk">
                <a href="javascript:void(0)" @click="handleClick">
                    <Icon type="ios-calendar-outline"></Icon>
                    <template v-if="value3 === ''">Select date</template>
                    <template v-else>{{ value3 }}</template>
                </a>
            </DatePicker> -->
        </Card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                open: false,
                value3: '',
                modal9: true,
                columnsUnderway: [{
                        title: '项目编号',
                        key: 'serial',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '项目名称',
                        key: 'name',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '建设单位',
                        key: 'unit',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '报告类型',
                        key: 'project',
                        filters: [{
                                label: '报告书',
                                value: "报告书"
                            },
                            {
                                label: '小学教程',
                                value: '小学教程'
                            }
                        ],
                        filterMethod(value, row) {
                            return row.project.indexOf(value) > -1;
                        }
                    },
                    {
                        title: '修改日期',
                        key: 'date',
                        align: 'center',
                        sortable: true,
                    },
                    {
                        title: "状态",
                        key: 'state',
                        align: 'center',
                        filters: [{
                                label: '资料收集',
                                value: "资料收集"
                            },
                            {
                                label: '大学教程',
                                value: '大学教程'
                            }
                        ],
                        filterMethod(value, row) {
                            return row.state.indexOf(value) > -1;
                        }
                    },
                    {
                        title: "操作",
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                dataUnderway: [{
                        serial: "0000000",
                        name: "啥啥项目",
                        unit: "某某某",
                        project: "报告书",
                        date: "2018-18-19",
                        state: "资料收集"
                    },
                    {},
                    {},
                    {},
                    {},
                    {},
                ]

            }
        },
        mounted(){
            // this.createProject()
        },
        methods:{
            /* 创建项目 */
            // createProject(){
            //     axios.get('/projectInformation/saveOrUpdateProject').then(res =>{
            //         console.log(res)
            //     })
            // }
        }
    }
</script>

<style scoped lang="less">
    .filter {
        padding-top: 15px;
    }

    dl {
        position: relative;
    }

    dl dt {
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 700;
    }

    .filter dl dd {
        padding-left: 70px;

        span {
            margin-right: 20px;
        }
    }

    #rili {
        position: fixed;
        right: 10px;
        bottom: 20px;
        width: 80px;
        height: 80px;
        z-index: 100;

        img {
            width: 100%;
        }
    }
</style>